<template>
  <el-submenu :index="menuData.menuUrl" :class="menuData.direct === 'transverse' ? 'transverse' : ''">
    <template slot="title">
      <!-- <router-link :to="menuData.menuUrl" class="white">{{menuData.title}}</router-link> -->
      <div @click="routerLink(menuData)" class="direct">{{ menuData.menuName }}</div>
      <!-- <i style="margin-left:70px" class="rightArrow"> </i> -->
    </template>
    <div v-for="(item) in menuData.children" :key="item.menuName">
      <el-menu-item v-if="!item.children" :index="item.menuUrl">
        <template slot="title">
          <div @click="routerLink(item)" class="direct">{{ item.menuName }}</div>
          <!-- <router-link :to="item.menuUrl" class="white">{{item.title}}</router-link> -->
        </template>
      </el-menu-item>
      <Topmenu @handleMenu="handleMenu" :menuData="item" v-else />
    </div>
  </el-submenu>
</template>

<script>
import microApp from "@micro-zoe/micro-app";
import qiankunActions from "../../micros/action";
import { getDdPmsToken } from "../../api/user";
export default {
  name: "Topmenu",
  props: {
    menuData: {
      type: [Object, Array],
      default: () => ([])
    }
  },
  data() {
    return {
    };
  },
  methods: {
    routerLink(item) {
      const powerList = this.$store.state.powerList || [];
      // 获取对应模块按钮权限
      const nowList = powerList.find((i) => i.id === item.id) || [];
      this.$store.commit("SET_NowPower", nowList.btn);
      // if (powerList.length > 0) {
      //   if (item.pid !== "1480016250535968" && !item.children) {
      //     const newMenu = flattenTree(menuTree);
      //     const result = (() => {
      //       for (let i = 0; i < newMenu.length; i++) {
      //         if (newMenu[i].id === item.pid) {
      //           if (newMenu[i].menuUrl.includes("#")) {
      //             const newResult = newMenu.find(j => j.id === newMenu[i].pid);
      //             return newResult;
      //           } else {
      //             return newMenu[i];
      //           }
      //         }
      //       }
      //     })();
      //     const nowPower = powerList.find(i => i.menuId === result.id);
      //     if (nowPower) {
      //       console.log(nowPower, "--nowPower");
      //       const result = JSON.parse(`[${nowPower.component.replaceAll("、", ",")}]`);
      //       this.$store.commit("SET_NowPower", result);
      //     }
      //     // const nowPower = JSON.parse(`[${powerList.find(i => i.menuId === result.id).component.replaceAll("、", ",")}]`);
      //   }
      // }
      // 展开菜单树状结构
      // function flattenTree(treeArray) {
      //   const flattened = [];
      //   function flatten(node) {
      //     flattened.push(node);
      //     if (node.children && node.children.length > 0) {
      //       for (let i = 0; i < node.children.length; i++) {
      //         flatten(node.children[i]);
      //       }
      //     }
      //   }
      //   for (let i = 0; i < treeArray.length; i++) {
      //     flatten(treeArray[i]);
      //   }
      //   return flattened;
      // }
      // 删除系统配置中缓存
      sessionStorage.removeItem("orgCheckId");
      sessionStorage.removeItem("sysMenu");
      sessionStorage.removeItem("rolCheckId");
      this.$emit("handleMenu", item);
      const { data, isMircos } = item;
      if (isMircos) {
        console.log("传参meetStatus:", data);
        microApp.setGlobalData({ meetStatus: data });
      }

      if (item.menuUrl.includes("operation-monitoring") || item.menuUrl.includes("power-grid-picture")) {
        const YXJCTOKEN = sessionStorage.getItem("YXJCTOKEN"); // { TOKEN: '', time: '' }
        let tobj;
        if (!YXJCTOKEN) {
          tobj = { TOKEN: "", time: "1635501600000" };
        } else {
          tobj = JSON.parse(YXJCTOKEN);
        }
        if ((+new Date() - Number(tobj.time)) > 900000) { // token 有效期为15分钟
          getDdPmsToken().then(res => {
            console.log("获取第三方token", res);
            const resp = JSON.parse(res);
            const TOKEN = resp.data.accessToken || "1480023250535968941f4d3170d55a9c";
            const tokenObj = { TOKEN, time: +new Date() };
            sessionStorage.setItem("YXJCTOKEN", JSON.stringify(tokenObj));
            qiankunActions.setGlobalState({ TOKEN });
            this.$router.push(item.menuUrl);
          });
        } else {
          const TOKEN = tobj.TOKEN;
          qiankunActions.setGlobalState({ TOKEN });
          this.$router.push(item.menuUrl);
        }
      } else {
        if (item.menuUrl.split("/")[1] == "web") { // 会商和视频查看路由处理
          if (item.menuUrl.split("/")[3].split("=")[0] == "list1") {
            const url = item.menuUrl.split("=")[0];
            const status = item.menuUrl.split("=")[1];
            console.log("会商列表", url, status);
            microApp.setGlobalData({ meetStatus: status });
            window.history.pushState(null, "", url);
          } else {
            window.history.pushState(null, "", item.menuUrl);
          }
        } else {
          this.$router.push(item.menuUrl);
        }
      }

      window.dispatchEvent(
        new PopStateEvent("popstate", { state: null })
      );
    },
    handleMenu(val) {
      this.$emit("handleMenu", val);
    }
  }
};
</script>

<style lang="less"  scoped>
.rightArrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("../../assets/img/rightArrow.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

:deep(.el-icon-arrow-right:before) {
  // content: "▲";
  content: "\e78f";
  font-size: 16px;
}

:deep(.el-submenu__title i) {
  color: #fff;
  transform: rotate(90deg);
}

:deep(.el-submenu__title .el-submenu__icon-arrow) {
  transform: rotate(90deg) !important;
}

:deep(.el-submenu__icon-arrow) {
  right: 10px;
}

:deep(.el-menu--horizontal.haha .el-menu.el-menu--popup .el-submenu.is-active > .el-submenu__title) {
  color: #fff !important;
}

:deep(.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title) {
  color: #fff !important;
}
</style>
